<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button-group>
					<el-button type="primary" icon="el-icon-plus" @click="createApp">创建</el-button>
					<!-- <el-button type="danger" icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del" v-if="selection.length>0">删除</el-button> -->
				</el-button-group>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="filterData.appName" placeholder="应用名称" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="searchApp"></el-button>
					<!--el-button type="text" icon="el-icon-menu" @click="changeOrgChart">全部</el-button-->
				</div>
			</div>
		</el-header>
		<el-main>
			<el-row style="padding-left: 15px;padding-bottom: 10px;">
				<jd-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></jd-select-filter>
			</el-row>
			<div v-if="appList.length==0">
				<el-empty description="暂无数据" :image-size="100" style="margin-top: 100px"></el-empty>
			</div>
			<div v-else>
				<el-row>
					<el-col :xl="6" :md="8" v-for="(item,index) in appList" :key="index" style="padding: 5px 10px;">
						<el-card class="appbox-card" shadow="never" style="cursor: pointer;">
							<template #header>
								<div class="card-header">
									<span>{{ item.appName }}</span>
									<div>
										<el-link class="button" type="primary" :underline="false" @click="designApp(item)">管理</el-link>
										<el-link type="danger" :underline="false" @click="deleteApp(item)">删除</el-link>
									</div>
								</div>
							</template>
							<el-row  @click.native="designApp(item)">
								<el-col :span="10">
									<el-icon style="font-size:80px;cursor: pointer;border-radius: 10px;" class="app-icon" :style="{'background-color': item.backColor, 'color': item.iconColor}"><component :is="item.appIcon" /></el-icon>
								</el-col>
								<el-col :span="14">
									<el-row class="describe">
										{{ item.describe }}
									</el-row>
								</el-col>
							</el-row>
						</el-card>
					</el-col>
				</el-row>
				<el-row style="padding-left: 10px;" v-if="total>pageSizes">
					<el-pagination  background :small="true" :total="total" :page-size="12" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
				</el-row>
			</div>
		</el-main>
	</el-container>

	<create-dialog v-if="dialog.appCreate" @close="refresh" ref="createDialog"  @success="handleSaveSuccess" @closed="dialog.appCreate=false"></create-dialog>
</template>

<script>
	import createDialog from './create';

	export default {
		name: 'appStore',
		components: {
			createDialog,
		},
		data() {
			return {
				userId: 0,
				dialog: {
					appCreate: false
				},
				form:{
					appName: "",
					appType: ""
				},
				cardNum: 1,
				appList: [],
				total: 100,
				pageSizes:10,
				currentPage: 1,
				scPageSize: 12,
				data: [
					{
						title: "应用分类",
						key: "state",
						options: [
							{
								label: "全部应用",
								value: ""
							},
						]
					},
				],
				selectedValues: {
					state: [""],
				},
				filterData: {
					pageNum:1,
					pageSize:12,
					appType:null,
					appName:null
				}
			}
		},
		created() {
			// 用户登录信息
			var userInfo = this.$TOOL.data.get("USER_INFO");
			this.userId = userInfo.user.userId;

			// 获取字典列表
			this.getDict();
			// 获取应用列表
			this.getAppList();
			// 自动展开菜单
			this.$store.commit('TOGGLE_IsCollapse', false);
		},
		methods: {
			// 字典列表
			getDict() {
				this.Dict.get("sys_app_types").then((res) => {
					var options = res.map(item => {
						return {
							label: item.dictLabel,
							value: item.dictValue
						}
					})
					this.data[0].options = [...this.data[0].options,...options];
				})
			},
			// 应用创建
			createApp(){
				this.dialog.appCreate = true;
				this.$nextTick(() =>{
					this.$refs.createDialog.open();
				})
			},
			// 应用设计
			designApp(item){
				//AppID编码规则：2位年+2月+2日+2时+2分+2秒+2位随机值 23031510165056
				this.$router.replace({
					path: '/app/store/design',
					query: {
						appId: item.appCode
					}
				});
			},
			// 应用删除
			deleteApp(item){
				// 应用下架
				this.$confirm('您确定要删除该应用？删除后数据不可被恢复。', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
				.then(async () => {
					var res = await this.$API.app.appStore.deleteApp.delete(item.appId);
					if (res.code == 200){
						this.$message.success("操作成功");
						this.getAppList();
					} else {
						this.$message.error("系统错误,请稍后再试");
					}
				})
			},
			// 应用搜索
			searchApp(){
				this.getAppList();
			},
			change(selected){
				this.filterData.appType = selected.state
				this.getAppList();
			},
			// 应用列表
			async getAppList(){
				var res = res = await this.$API.app.appStore.listApp.get(this.filterData);
				if (res.code == 200){
					this.appList = res.data.rows;
					this.total = res.data.total;
				}
			},
			//分页点击
			paginationChange() {
				this.$emit("current-change",this.currentPage,this.scPageSize)
				this.filterData.pageNum=this.currentPage;
				this.getAppList();
			},
			//条数变化
			pageSizeChange(size) {
				this.scPageSize = size
				this.$emit("current-change",this.currentPage,this.scPageSize)
				this.getAppList();
			},
		},
	}
</script>
<style lang="scss" scoped>
.appbox-card{
	width: 100%;
	overflow: hidden;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.app-icon{
		width: 120px;
		height: 120px;
		fill: rgba(253, 253, 253, 0.65) !important;
		background-color: #409EFF;
		padding: 10px;
		border-radius: 12px;
	}
	.app-name{
		text-align: center;
		margin-top:10px;
		font-size: 14px;
	}
	.describe{
		font-size: 15px;
		line-height: 130%;
		overflow: hidden;
		text-align: justify;
		text-overflow: ellipsis;
		-webkit-line-clamp: 5;
		display: -webkit-box;
  		-webkit-box-orient: vertical;
	}
}
</style>
